<template>
  <div class="exam-content-wrapper" :class="{ disabled }">
    <img
      v-if="contentData.contentUrl"
      :src="assetsUrl + contentData.contentUrl"
      alt=""
      class="bg"
    />
    <HelpBoxShadow v-if="isHelp" :helpData="helpData" @onClose="onCloseHelp" />
    <div v-else class="box-wrapper">
      <div
        v-for="element in contentData.elementList"
        :key="element.elementId"
        :style="{
          width: element.width,
          height: element.height,
          top: element.top,
          left: element.left,
        }"
        class="box"
        :class="{ clicked: element.elementId === clickId }"
        @click="onClickAnchor(element)"
      ></div>
    </div>
  </div>
</template>

<script>
import HelpBoxShadow from "./helpBoxShadow.vue";

export default {
  name: "ExamContent",
  components: {
    HelpBoxShadow,
  },
  props: {
    contentData: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isHelp: {
      type: Boolean,
      default: false,
    },
    helpData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      trackList: [],
      assetsUrl: process.env.VUE_APP_ASSETS_URL,
      clickId: null,
    };
  },
  computed: {},
  methods: {
    onCloseHelp() {
      this.$emit("onCloseHelp");
    },
    onClickAnchor(element) {
      this.$emit("onClickAnchor", element);

      this.clickId = element.elementId;
      // 在一段时间后移除点击样式
      setTimeout(() => {
        this.clickId = null;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.exam-content-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  .bg {
    width: 100%;
  }

  .help-wrapper {
    .box {
      position: absolute;
      .desc {
        position: absolute;
        right: -100px;
        bottom: 0;
        background: #060606;
        padding: 10px;
        color: #fff;
        min-width: 100px;
      }
    }
  }

  .box-wrapper {
    .box {
      position: absolute;

      &.clicked {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0px 0px 20px 0px rgba(64, 128, 255, 0.7);
      }
    }
  }

  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
  }
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
}
</style>
